<template>
    <div class="floor floor2">
        <li>
            <i>
                红色
            </i>
        </li>
        <li>
            <i>
                粉色
            </i>
        </li>
        <li>
            <i>
                香槟
            </i>
        </li>
        <li>
            <i>
                黄色
            </i>
        </li>
        <li>
                <i>
                    白色
                </i>
            </li>
            <li>
                <i>
                    紫色
                </i>
            </li>
            <li>
                <i>
                    蓝色
                </i>
            </li>
            <li>
                    <i>
                        绿色
                    </i>
                </li>
            
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped>
    .floor {
        width: 60%;
        float: right;
        padding: 10% 5%  5% 5%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        height: 10rem;

    }

    .floor2 li {
        /* background-color:#000; */
        width: 23%;
        height: 5rem;
        /* background-color: skyblue; */
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 5rem;
        color: #fff;
    }

    .floor2 li i {
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        /* background-color: hotpink; */
        line-height: 3rem;
    }
    .floor2 li:nth-child(1) i{
        background-color: #f14545;
    }
    .floor2 li:nth-child(2) i{
        background-color: #fc8585;
    }
    .floor2 li:nth-child(3) i{
        background-color: #e6b885;
    }
    .floor2 li:nth-child(4) i{
        background-color: #febe2a;
    }
    .floor2 li:nth-child(5) i{
        background-color: #fff;
        color:#ccc;
        border: 1px solid #ccc
    }
    .floor2 li:nth-child(6) i{
        background-color: #e2649b;
    }
    .floor2 li:nth-child(7) i{
        background-color: #67d9ea;
    }
    .floor2 li:nth-child(8) i{
        background-color:lightgreen;
    }
</style>